<template>
  <div style="min-width: 100%;height: 100%">
    <el-main v-model="selected" >
      <div class="block" style="height:400px">
        <!-- {{selected}} -->
        <div style="height:100%;width:100%" v-if="selected==0">
          <!-- 1*1布局 -->
          <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
            <el-col :span="24"></el-col>
          </el-row>
        </div>
        <!-- 2*1布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==1">
          <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
          </el-row>
        </div>
        <!-- 2*2 -->
        <div style="height:100%;width:100%" v-else-if="selected==2">
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
          </el-row>
          <br>
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
          </el-row>
        </div>
        <!-- 3*2布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==3">
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
          </el-row>
          <br>
          <el-row  :gutter="10"type="flex" class="row-bg" justify="center">
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
            <el-col :span="12"><div class="grid-content "></div></el-col>
          </el-row>
        </div>
        <!-- 3*3模式 -->
        <div style="height:100%;width:100%" v-else-if="selected==4">
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
          </el-row>
          <br>
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
          </el-row>
          <br>
          <el-row :gutter="10" type="flex" class="row-bg" justify="center">
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
          </el-row>
        </div>
        <!-- 1+5模式-->
        <div style="height:100%;width:100%" v-if="selected==5">
          <el-row :gutter="10" type="flex" class="row-bg" justify="start">
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
            <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
          </el-row>
          <br>
          <el-row :gutter="10" type="flex" class="row-bg" justify="start">
            <el-col :span="8">
              <div class="grid-a-contentWidth"></div>
              <br>
              <div class="grid-a-contentWidth"></div>
            </el-col>
            <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
          </el-row>
        </div>
      </div>
    </el-main>
    <span class="field-label">方块选择:</span>
    <!-- 选择屏幕框 -->
    <select v-model="selected" @change="selectbj(selected)">
      <option v-for="option in layouts" :value="option.value">
        {{ option.name }}
      </option>
    </select>
  </div>
</template>

<script>
 export default {
   data(){
    return {
      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': '0' },
        { 'name': '2x1模式', 'value': '1' },
        { 'name': '2x2模式', 'value': '2' },
        { 'name': '3x2模式', 'value': '3' },
        { 'name': '3x3模式', 'value': '4' },
        { 'name': '1+5模式', 'value': '5' }
      ],
    }
   }
 }
</script>

<style lang="less" scoped>
  @import "../style/layout.less";
</style>
